<template>
  <div class="sider">
    <div class="left">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#656469"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1" @click="toOne">
          <i class="el-icon-medal"></i>
          <span slot="title">第一题</span>
        </el-menu-item>
        <el-menu-item index="2" @click="toTwo">
          <i class="el-icon-medal"></i>
          <span slot="title">第二题</span>
        </el-menu-item>
        <el-menu-item index="3" @click="toThree">
          <i class="el-icon-medal"></i>
          <span slot="title">第三题</span> </el-menu-item
        ><el-menu-item index="4" @click="toFour">
          <i class="el-icon-medal"></i>
          <span slot="title">第四题</span>
        </el-menu-item>
        <el-menu-item index="5" @click="toFive">
          <i class="el-icon-medal"></i>
          <span slot="title">第五题</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>


<script>
export default {
  name: "Sider",
  components: {},
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toOne() {
      this.$router.push({
        name: "one",
      });
    },
    toTwo() {
      let a = this.$router.push({
        path: "/two",
      });
      console.log(a, "我");
    },
    toThree() {
      this.$router.push({
        path: "/three",
      });
    },
    toFour() {
      let a = this.$router.push({
        path: "/four",
      });
      console.log(a);
    },
    toFive() {
      let a = this.$router.push({
        path: "/five",
      });
      console.log(a);
    },
    toDemo() {
      this.$router.push({
        path: "/demo",
      });
    },
  },
};
</script>


<style scoped>
.sider {
  height: 1000px;
}
.left {
  position: fixed;
  top: 0;
  float: left;
  width: 20%;
  height: 100%;
  background: #656469;
}
.right {
  float: right;
  width: 70%;
  margin-left: 30px;
  margin-top: 30px;
}
</style>